<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XMLHttpRequest2.0 管理表单数据</title>
</head>
<body>
<form action="">
    <label for="">
        姓名: <input type="text" name="name">
    </label>

    <label for="">
        年龄: <input type="text" name="age">
    </label>
    <label for="">
        <input type="button" value="保存">
    </label>
</form>

<script>
    var btn = document.querySelector("[type=button]");

    // 原生JS里有没有一个方法和jQuery中serialize()
    // key=val&key1=val1

    var formData = new FormData();

    var obj = {
        name:"zlj",
        age:10,
        key:"val"
    };

    /* formData.append("key","val");
     formData.append("name","zlj");
     formData.append("age",10);*/

    for(var key in obj){
        formData.append(key,obj[key]);
    }

    //console.log(formData);

    var xhq = new XMLHttpRequest();
    xhq.open("post","03.php");

    //当xhq.send(formData),此时post表单提交不需要设置请求头，Content-Type,系统会自动设置
    xhq.send(formData);

    xhq.onreadystatechange = function(){
        if(xhq.readyState == 4 && xhq.status == 200){
            console.log(xhq.responseText);
        }
    }
</script>
</body>
</html>